<template>
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <up-tabs
          activeColor="#f29100"
          ref="tabs"
          :list="list"
          :current="currentTab"
          @change="change"
          :is-scroll="false"
          swiperWidth="750"
        ></up-tabs>
      </view>
      <swiper
        class="swiper-box"
        :current="swiperCurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiper-item" v-for="(order, index) in orderList" :key="index">
          <scroll-view
            scroll-y
            style="height: 100%; width: 100%;"
            @scrolltolower="reachBottom"
          >
            <view class="page-box">
              <view class="order" v-for="(res, index) in order" :key="res.id">
                <view class="top">
                  <view class="left">
                    <!-- <up-icon name="home" :size="30" color="rgb(94,94,94)"></up-icon> -->
                    <view class="store">{{ res.store }}</view>
                    <up-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></up-icon>
                  </view>
                  <view class="right">{{ res.deal }}</view>
                </view>
                <view class="item" v-for="(item, index) in res.goodsList" :key="index">
                  <view class="left"><image :src="`/img${item.goodsUrl}`" mode="aspectFill"></image></view>
                  <view class="content">
                    <view class="title u-line-2">{{ item.title }}</view>
                    <view class="type">{{ item.type }}</view>
                    <!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
                  </view>
                  <view class="right">
                    <view class="price">
                      ￥{{ priceInt(item.price) }}
                      <text class="decimal">.{{ priceDecimal(item.price) }}</text>
                    </view>
                    <view class="number">x{{ item.number }}</view>
                  </view>
                </view>
                <view class="total">
                  共{{ totalNum(res.goodsList) }}件商品 合计:
                  <text class="total-price">
                    ￥{{ priceInt(totalPrice(res.goodsList)) }}.
                    <text class="decimal">{{ priceDecimal(totalPrice(res.goodsList)) }}</text>
                  </text>
                </view>
                <view class="bottom">
                  <view class="more"><up-icon name="more-dot-fill" color="rgb(203,203,203)"></up-icon></view>
                  <view class="logistics btn">查看物流</view>
                  <!-- <view class="exchange btn">卖了换钱</view> -->
                  <view v-show="res.deal == '待付款' ">
					  <view class="evaluate btn">付款</view>
				  </view>
				  <view v-show="res.deal == '待发货' ">
					  <view class="evaluate btn">发货</view>
				  </view>
				  <view v-show="res.deal == '待收货' ">
					  <view class="evaluate btn">收货</view>
				  </view>
				  <view v-show="res.deal == '待评价' ">
					  <view class="evaluate btn">评价</view>
				  </view>
                </view>
              </view>
              <up-loadmore :status="loadStatus[index]" bgColor="#f2f2f2"></up-loadmore>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup>
	import { ref, onMounted, computed } from 'vue';
	import { random, guid } from '@/node_modules/uview-plus';
	import { findOrder } from '@/common/api.js'
	import { useUserStore } from '@/stores/user.js'

	const userStore = useUserStore()

	const orderList = ref([[], [], [], []]);
	const loadStatus = ref(['loadmore', 'loadmore', 'loadmore', 'loadmore']);
	const list = ref([
	  { name: '待付款' },
	  { name: '待发货' },
	  { name: '待收货' },
	  { name: '待评价', count: 12 }
	]);
	const currentTab = ref(0);
	const swiperCurrent = ref(0);
	// 当前第几页
	const pageNo = ref([1, 1, 1, 1])
	// 示例数据
	// const dataList = ref([{
	// 	id: 1,
	// 	store: '种子订单',
	// 	deal: '交易成功',
	// 	goodsList: [
	// 		{
	// 			goodsUrl: '/images/baicai.jpg',
	// 			title: '【冬日限定】现货 精品种子包长熟成熟小白菜精美诱惑白白嫩嫩小可爱白菜',
	// 			type: '青色;白色',
	// 			deliveryTime: '付款后30天内发货',
	// 			price: '348.58',
	// 			number: 1
	// 		}
	// 	]
	// }])

	onMounted(() => {
	  getOrderList(0);
	  getOrderList(1);
	  getOrderList(2);
	  getOrderList(3);
	});

	// 页面数据
	// 分页查询
	const getOrderList = (idx) => {
		// 传入数据，如果当前为第1页，则覆盖数据
		// TODO：区分每种不同的
		let status = '';
		if (idx == 0) {
			status = '待付款'
		} else if (idx == 1) {
			status = '待发货'
		} else if (idx == 2) {
			status = '待收货'
		} else if (idx == 3) {
			status = '待评价'
		}
		findOrder({
			pageNo: pageNo.value[idx],
			pageSize: 10,
			userId: userStore.user.userId,
			status: status
		}).then(res=>{
			console.log(res)
			if (res.code == 0) {
				console.log(res.message)
				if (res.total != 0) {
					console.log("获取订单数据：", res.data);
					for (let order of res.data) {
						console.log("单一订单数据：", order)
						let tmp = {
							id: order.orderId,
							store: order.orderType,
							deal: order.orderStatus,
							goodsList: [],
						}
						console.log("记录一：", tmp)
						if (order.goodsList != undefined && order.goodsList != null) {
							for (let item of order.goodsList) {
								console.log("item", item)
								tmp.goodsList.push({
									goodsUrl: item.goodsUrl,
									title: item.title,
									type: item.goodsType,
									// deliveryTime: '已经发货',
									price: item.price,
									number: item.number
								})
							}
							console.log("记录二：", tmp)
						}
						orderList.value[idx].push(tmp);
					}

					loadStatus.value.splice(currentTab.value, 1,"loadmore")
				} else {
					loadStatus.value.splice(currentTab.value, 1,"nomore")
					
				}
			}
		})
	}
	const priceDecimal = (val) => {
	  return val !== parseInt(val) ? val.slice(-2) : '00';
	};
	
	const priceInt = (val) => {
	  return val !== parseInt(val) ? val.split('.')[0] : val;
	};
	
	const totalPrice = (item) => {
	    return item.reduce((total, val) => total + parseFloat(val.price), 0).toFixed(2);
	};
	
	const totalNum = (item) => {
	  return item.reduce((total, val) => total + val.number, 0);
	};
	
	const change = (e) => {
	  swiperCurrent.value = e.index;
	};
	
	const reachBottom = () => {
	  if (currentTab.value !== 2) {
		loadStatus.value.splice(currentTab.value,1,"loading")
		pageNo.value[currentTab.value] = pageNo.value[currentTab.value] + 1
		getOrderList(currentTab.value);
	  }
	};
	
	const tabs = ref(null)
	
	const transition = ({ detail: { dx } }) => {

	};
	
	const animationfinish = ({ detail: { current } }) => {
	  swiperCurrent.value = current;	
	  currentTab.value = current;
	};
	
</script>

<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.right {
			color: #f1a532;
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 50rpx;
			}
			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: #909193;
			}
			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: #909193;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: space-between;
		align-items: center;
		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid #dadbde;
			font-size: 26rpx;
			text-align: center;
			color: #767a82;
		}
		.evaluate {
			color: #f1a532;
			border-color: #f1a532;
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 164rpx;
		height: 164rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: white;
		font-size: 26rpx;
		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
}
</style>
